<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>专家管理</title>
  <link rel="stylesheet" href="../../css/sysmgmt(专家管理）.css" />
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
  <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../src/font/font-index/iconfont.css">
  <script src="../../src/font/font-index/iconfont.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div id="searchDiv">
          <form class="form-inline" action="#">
            <div class="form-group">
              <input type="text" id="searchName" class="form-control" placeholder="请输入专家名称" />
            </div>
            <div class="form-group">
              <select id="searchHospital" class="form-control">
                <option value="0">选择医院</option>
                <option value="1">乐清人民医院</option>
                <option value="2">温州儿童医院</option>
                <option value="3">温州三甲医院</option>
                <option value="4">北京仁和医院</option>
              </select>
            </div>
            <div class="form-group">
              <select id="searchRank" class="form-control">
                <option value="0">角色选择</option>
                <option value="1">主任医生</option>
                <option value="2">副主任医生</option>
                <option value="3">医生</option>
                <option value="4">助理医生</option>
                <option value="5">药师</option>
              </select>
            </div>
            <button class="btn btn-default" id="searchBtn">
              <span class="glyphicon glyphicon-search"></span> 查询
            </button>
            <button class="btn btn-default" id="reset">
              <span class="glyphicon glyphicon-repeat"></span> 清空
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="optionDiv">
          <button class="btn btn-default" id="append" data-toggle="modal" data-target="#add">
            + 新增专家
          </button>
          <button class="btn btn-default" id="export">
            <span class="glyphicon glyphicon-open"></span> 导出
          </button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <table id="tableHead" class="table table-hover">
          <thead>
            <tr>
              <td>
                <input type="checkbox" id="inlineCheckbox1" value="option1" />
                ID
              </td>
              <td align="center">专家名称</td>
              <td align="center">所处医院</td>
              <td align="center">专家头像</td>
              <td align="center">职称</td>
              <td align="center">图文问诊收费</td>
              <td align="center">视频问诊收费</td>
              <td align="center">排序值</td>
              <td align="center">启用状态</td>
              <td align="center">操作</td>
            </tr>
          </thead>
          <tbody id="tableDiv">
            <!-- 这里渲染数据 -->
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="pageBox">
          <span>共<span id="totPage"></span></span>
          <select id="selectShowPageNum" class="form-control">
            <option value="0">10条/页</option>
            <option value="1">20条/页</option>
            <option value="2">50条/页</option>
          </select>
          <span id="prePage" class="glyphicon glyphicon-chevron-left"></span>
          <div id="pageDiv">
            <!-- 这里渲染页码 -->
            <span class="page active">1</span>
            <span class="page">1</span>
          </div>
          <span id="nextPage" class="glyphicon glyphicon-chevron-right"></span>
          <span id="skip">
            前往
            <input type="text" id="goPageNum" class="form-control" /><span>
              页
            </span></span>
          <span id="goPage">跳转</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加模态框 -->
  <div class="modal fade" id="add" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
      </div> -->
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label class="control-label"><span class="redcolor">*</span>选择医院：</label>
            <select id="appendHospital" class="form-control">
              <option value="0">选择医院</option>
              <option value="乐清人民医院">乐清人民医院</option>
              <option value="温州儿童医院">温州儿童医院</option>
              <option value="温州三甲医院">温州三甲医院</option>
              <option value="北京仁和医院">北京仁和医院</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label"><span class="redcolor">*</span>科室：</label>
            <select id="appendDepartment" class="form-control">
              <option value="0">选择科室</option>
              <option value="儿科">儿科</option>
              <option value="外科">外科</option>
              <option value="内科">内科</option>
              <option value="其他科室">其他科室</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label"><span class="redcolor">*</span>类型角色：</label>
            <select id="appendJuese" class="form-control">
              <option value="0">选择角色</option>
              <option value="医生">医生</option>
              <option value="药师">药师</option>
            </select>
          </div>
          <div class="form-group">
            <label for="recipient-price" class="control-label"><span class="redcolor">*</span>名称：</label>
            <input type="text" class="form-control" id="appendName" />
          </div>
          <div class="form-group">
            <label class="control-label"><span class="redcolor">*</span>选择职称：</label>
            <select id="appendRank" class="form-control">
              <option value="0">选择职称</option>
              <option value="主任医生">主任医生</option>
              <option value="副主任医生">副主任医生</option>
              <option value="医生">医生</option>
              <option value="助理医生">助理医生</option>
              <option value="药师">药师</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label"><span class="redcolor">*</span>人员头像：</label>
            <div id="addpicdiv">
              <img id="picbox" src="../../src/img/黑框照片.png">
              <input type="file" id="addpic" hidden onchange="clickme1(this)">
              <label for="addpic" class="addimg">上传图片</label>
            </div>
          </div>
          <div class="form-group">
            <label for="recipient-price" class="control-label"><span class="redcolor">*</span>图文收费：</label>
            <input type="text" class="form-control" id="appendTxt" />
          </div>
          <div class="form-group">
            <label for="recipient-price" class="control-label"><span class="redcolor">*</span>视频收费：</label>
            <input type="text" class="form-control" id="appendVideo" />
          </div>
          <div class="form-group">
            <label for="recipient-price" class="control-label">虚拟咨询量：</label>
            <input type="text" class="form-control" id="appendContent" />
          </div>
          <div class="form-group">
            擅长领域：
            <textarea class="form-control" rows="3"></textarea>
          </div>
          <div class="form-group">
            人员简介：
            <textarea class="form-control" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label class="control-label">身份证：</label>
            <div id="addpicdiv">
              <img id="picbox" src="../../src/img/黑框照片.png">
              <input type="file" id="addpic" hidden onchange="clickme1(this)">
              <label for="addpic" class="addimg">上传图片</label>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">执照：</label>
            <div id="addpicdiv">
              <img id="picbox" src="../../src/img/黑框照片.png">
              <input type="file" id="addpic" hidden onchange="clickme1(this)">
              <label for="addpic" class="addimg">上传图片</label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          取消
        </button>
        <button type="button" id="save" class="btn btn-primary">
          保存
        </button>
      </div>
    </div>
  </div>
  </div>

  <!-- 删除模态框 -->
  <div class="modal fade" id="delDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          是否确认删除？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="del" class="btn btn-primary">删除</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改模态框 -->
  <div class="modal fade" id="amendDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label class="control-label"><span class="redcolor">*</span>选择医院：</label>
              <select id="amendHospital" class="form-control">
                <option value="0">选择医院</option>
                <option value="乐清人民医院">乐清人民医院</option>
                <option value="温州儿童医院">温州儿童医院</option>
                <option value="温州三甲医院">温州三甲医院</option>
                <option value="北京仁和医院">北京仁和医院</option>
              </select>
            </div>
            <div class="form-group">
              <label class="control-label"><span class="redcolor">*</span>科室：</label>
              <select id="amendDepartment" class="form-control">
                <option value="0">选择科室</option>
                <option value="儿科">儿科</option>
                <option value="外科">外科</option>
                <option value="内科">内科</option>
                <option value="其他科室">其他科室</option>
              </select>
            </div>
            <div class="form-group">
              <label class="control-label"><span class="redcolor">*</span>类型角色：</label>
              <select id="amendJuese" class="form-control">
                <option value="0">选择角色</option>
                <option value="医生">医生</option>
                <option value="药师">药师</option>
              </select>
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span class="redcolor">*</span>名称：</label>
              <input type="text" class="form-control" id="amendName" />
            </div>
            <div class="form-group">
              <label class="control-label"><span class="redcolor">*</span>选择职称：</label>
              <select id="amendRank" class="form-control">
                <option value="0">选择职称</option>
                <option value="主任医生">主任医生</option>
                <option value="副主任医生">副主任医生</option>
                <option value="医生">医生</option>
                <option value="助理医生">助理医生</option>
                <option value="药师">药师</option>
              </select>
            </div>
            <div class="form-group">
              <label class="control-label">人员头像：</label>
              <div id="addpicdiv">
                <img id="picbox" src="../../src/img/黑框照片.png">
                <input type="file" id="addpic" hidden onchange="clickme1(this)">
                <label for="addpic" class="addimg">上传图片</label>
              </div>
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span class="redcolor">*</span>图文收费：</label>
              <input type="text" class="form-control" id="amendTxt" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label"><span class="redcolor">*</span>视频收费：</label>
              <input type="text" class="form-control" id="amendVideo" />
            </div>
            <div class="form-group">
              擅长领域：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              人员简介：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label class="control-label">身份证：</label>
              <div id="addpicdiv">
                <img id="picbox" src="../../src/img/黑框照片.png">
                <input type="file" id="addpic" hidden onchange="clickme1(this)">
                <label for="addpic" class="addimg">上传图片</label>
              </div>
            </div><div class="form-group">
              <label class="control-label">执照：</label>
              <div id="addpicdiv">
                <img id="picbox" src="../../src/img/黑框照片.png">
                <input type="file" id="addpic" hidden onchange="clickme1(this)">
                <label for="addpic" class="addimg">上传图片</label>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            取消
          </button>
          <button type="button" id="xiugai" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 模拟数据
    let arr = [
      { id: 1, name: '张三', hospital: '乐清人民医院', department: '儿科', juese: '医生', rank: '主任医生', txtInquiry: '￥199.0', videoInquiry: '￥199.0', sort: 99, state: 2 },
      { id: 2, name: '李四', hospital: '温州三甲医院', department: '外科', juese: '药师', rank: '副主任医生', txtInquiry: '￥130.0', videoInquiry: '￥130.0', sort: 98, state: 1 },
      { id: 3, name: '王五', hospital: '乐清人民医院', department: '内科', juese: '医生', rank: '主任医生', txtInquiry: '￥200.0', videoInquiry: '￥200.0', sort: 97, state: 1 },
      { id: 4, name: '小李', hospital: '北京仁和医院', department: '其他科室', juese: '医生', rank: '医生', txtInquiry: '￥190.0', videoInquiry: '￥190.0', sort: 96, state: 1 },
      { id: 5, name: '小梁', hospital: '温州三甲医院', department: '其他科室', juese: '药师', rank: '医生', txtInquiry: '-', videoInquiry: '-', sort: 95, state: 2 },
      { id: 6, name: '陈某', hospital: '温州三甲医院', department: '儿科', juese: '药师', rank: '药师', txtInquiry: '-', videoInquiry: '-', sort: 94, state: 1 },
      { id: 7, name: '王可', hospital: '温州三甲医院', department: '外科', juese: '医生', rank: '药师', txtInquiry: '￥180.0', videoInquiry: '￥180.0', sort: 93, state: 1 },
      { id: 8, name: '李牧', hospital: '温州三甲医院', department: '内科', juese: '药师', rank: '主任医生', txtInquiry: '￥160.0', videoInquiry: '￥160.0', sort: 92, state: 1 },
      { id: 9, name: '苏某', hospital: '温州儿童医院', department: '外科', juese: '药师', rank: '主任医生', txtInquiry: '￥50.0', videoInquiry: '￥50.0', sort: 91, state: 1 },
      { id: 10, name: '李白', hospital: '温州三甲医院', department: '内科', juese: '医生', rank: '医生', txtInquiry: '￥80.0', videoInquiry: '￥80.0', sort: 90, state: 2 },
      { id: 11, name: '杜甫', hospital: '温州儿童医院', department: '其他科室', juese: '医生', rank: '副主任医生', txtInquiry: '￥90.0', videoInquiry: '￥90.0', sort: 89, state: 1 },
      { id: 12, name: '杜牧', hospital: '乐清人民医院', department: '儿科', juese: '医生', rank: '医生', txtInquiry: '￥50.0', videoInquiry: '￥50.0', sort: 88, state: 1 },
      { id: 13, name: '陈庆之', hospital: '北京仁和医院', department: '其他科室', juese: '医生', rank: '主任医生', txtInquiry: '￥79.0', videoInquiry: '￥79.0', sort: 87, state: 1 },
      { id: 14, name: '曹操', hospital: '北京仁和医院', department: '内科', juese: '医生', rank: '药师', txtInquiry: '￥99.0', videoInquiry: '￥99.0', sort: 86, state: 1 },
      { id: 15, name: '张飞', hospital: '温州儿童医院', department: '其他科室', juese: '药师', rank: '主任医生', txtInquiry: '￥159.0', videoInquiry: '￥159.0', sort: 85, state: 1 },
      { id: 16, name: '张飞', hospital: '温州三甲医院', department: '儿科', juese: '药师', rank: '医生', txtInquiry: '￥189.0', videoInquiry: '￥189.0', sort: 84, state: 1 },
      { id: 17, name: '张飞', hospital: '北京仁和医院', department: '内科', juese: '医生', rank: '副主任医生', txtInquiry: '￥147.0', videoInquiry: '￥147.0', sort: 83, state: 1 },
      { id: 18, name: '张飞', hospital: '北京仁和医院', department: '儿科', juese: '医生', rank: '副主任医生', txtInquiry: '￥59.0', videoInquiry: '￥59.0', sort: 82, state: 1 },
      { id: 19, name: '张飞', hospital: '乐清人民医院', department: '儿科', juese: '医生', rank: '医生', txtInquiry: '￥70.0', videoInquiry: '￥70.0', sort: 81, state: 2 },
      { id: 20, name: '张飞', hospital: '乐清人民医院', department: '外科', juese: '医生', rank: '药师', txtInquiry: '-', videoInquiry: '-', sort: 80, state: 1 },
      { id: 21, name: '张三', hospital: '乐清人民医院', department: '外科', juese: '医生', rank: '主任医生', txtInquiry: '￥199.0', videoInquiry: '￥199.0', sort: 79, state: 1 },
      { id: 22, name: '李四', hospital: '温州三甲医院', department: '外科', juese: '药师', rank: '副主任医生', txtInquiry: '￥130.0', videoInquiry: '￥130.0', sort: 78, state: 1 },
      { id: 23, name: '王五', hospital: '乐清人民医院', department: '儿科', juese: '医生', rank: '主任医生', txtInquiry: '￥200.0', videoInquiry: '￥200.0', sort: 77, state: 1 },
      { id: 24, name: '小李', hospital: '北京仁和医院', department: '儿科', juese: '药师', rank: '医生', txtInquiry: '￥190.0', videoInquiry: '￥190.0', sort: 76, state: 1 },
      { id: 25, name: '小梁', hospital: '温州三甲医院', department: '儿科', juese: '药师', rank: '医生', txtInquiry: '￥180.0', videoInquiry: '￥180.0', sort: 75, state: 1 },
      { id: 26, name: '陈某', hospital: '温州三甲医院', department: '其他科室', juese: '医生', rank: '药师', txtInquiry: '￥175.0', videoInquiry: '￥175.0', sort: 74, state: 1 },
      { id: 27, name: '王可', hospital: '温州三甲医院', department: '其他科室', juese: '医生', rank: '药师', txtInquiry: '-', videoInquiry: '-', sort: 73, state: 1 },
      { id: 28, name: '李牧', hospital: '温州三甲医院', department: '儿科', juese: '药师', rank: '主任医生', txtInquiry: '￥160.0', videoInquiry: '￥160.0', sort: 72, state: 1 },
      { id: 29, name: '苏某', hospital: '温州儿童医院', department: '其他科室', juese: '药师', rank: '主任医生', txtInquiry: '￥50.0', videoInquiry: '￥50.0', sort: 71, state: 1 },
      { id: 30, name: '李白', hospital: '温州三甲医院', department: '儿科', juese: '医生', rank: '医生', txtInquiry: '￥80.0', videoInquiry: '￥80.0', sort: 70, state: 1 },
      { id: 31, name: '杜甫', hospital: '温州儿童医院', department: '内科', juese: '药师', rank: '副主任医生', txtInquiry: '￥90.0', videoInquiry: '￥90.0', sort: 69, state: 1 },
      { id: 32, name: '杜牧', hospital: '乐清人民医院', department: '内科', juese: '药师', rank: '医生', txtInquiry: '￥50.0', videoInquiry: '￥50.0', sort: 68, state: 1 },
      { id: 33, name: '陈庆之', hospital: '北京仁和医院', department: '内科', juese: '药师', rank: '主任医生', txtInquiry: '￥79.0', videoInquiry: '￥79.0', sort: 67, state: 1 },
      { id: 34, name: '曹操', hospital: '北京仁和医院', department: '内科', juese: '药师', rank: '药师', txtInquiry: '￥99.0', videoInquiry: '￥99.0', sort: 66, state: 1 },
      { id: 35, name: '张飞', hospital: '温州儿童医院', department: '儿科', juese: '医生', rank: '主任医生', txtInquiry: '￥159.0', videoInquiry: '￥159.0', sort: 65, state: 1 },
      { id: 36, name: '张飞', hospital: '温州三甲医院', department: '内科', juese: '药师', rank: '医生', txtInquiry: '￥189.0', videoInquiry: '￥189.0', sort: 64, state: 1 },
      { id: 37, name: '张飞', hospital: '北京仁和医院', department: '内科', juese: '医生', rank: '副主任医生', txtInquiry: '-', videoInquiry: '-', sort: 63, state: 1 },
      { id: 38, name: '张飞', hospital: '北京仁和医院', department: '内科', juese: '药师', rank: '副主任医生', txtInquiry: '￥59.0', videoInquiry: '￥59.0', sort: 62, state: 1 },
      { id: 39, name: '张飞', hospital: '乐清人民医院', department: '其他科室', juese: '药师', rank: '医生', txtInquiry: '￥70.0', videoInquiry: '￥70.0', sort: 61, state: 1 },
      { id: 40, name: '张飞', hospital: '乐清人民医院', department: '儿科', juese: '医生', rank: '药师', txtInquiry: '￥65.0', videoInquiry: '￥65.0', sort: 60, state: 1 },
      { id: 41, name: '张三', hospital: '乐清人民医院', department: '内科', juese: '药师', rank: '主任医生', txtInquiry: '￥199.0', videoInquiry: '￥199.0', sort: 59, state: 1 },
      { id: 42, name: '李四', hospital: '温州三甲医院', department: '内科', juese: '医生', rank: '副主任医生', txtInquiry: '￥130.0', videoInquiry: '￥130.0', sort: 58, state: 1 },
      { id: 43, name: '王五', hospital: '乐清人民医院', department: '内科', juese: '药师', rank: '主任医生', txtInquiry: '￥200.0', videoInquiry: '￥200.0', sort: 57, state: 1 },
      { id: 44, name: '小李', hospital: '北京仁和医院', department: '其他科室', juese: '药师', rank: '医生', txtInquiry: '￥190.0', videoInquiry: '￥190.0', sort: 56, state: 1 },
      { id: 45, name: '小梁', hospital: '温州三甲医院', department: '外科', juese: '医生', rank: '医生', txtInquiry: '￥180.0', videoInquiry: '￥180.0', sort: 55, state: 1 },
      { id: 46, name: '陈某', hospital: '温州三甲医院', department: '内科', juese: '医生', rank: '药师', txtInquiry: '￥175.0', videoInquiry: '￥175.0', sort: 54, state: 1 },
      { id: 47, name: '王可', hospital: '温州三甲医院', department: '内科', juese: '药师', rank: '药师', txtInquiry: '￥180.0', videoInquiry: '￥180.0', sort: 53, state: 1 },
      { id: 48, name: '李牧', hospital: '温州三甲医院', department: '儿科', juese: '药师', rank: '主任医生', txtInquiry: '-', videoInquiry: '-', sort: 52, state: 1 },
      { id: 49, name: '苏某', hospital: '温州儿童医院', department: '外科', juese: '医生', rank: '主任医生', txtInquiry: '-', videoInquiry: '-', sort: 51, state: 1 },
      { id: 50, name: '李白', hospital: '温州三甲医院', department: '外科', juese: '药师', rank: '医生', txtInquiry: '￥80.0', videoInquiry: '￥80.0', sort: 50, state: 1 },
      { id: 51, name: '杜甫', hospital: '温州儿童医院', department: '外科', juese: '药师', rank: '副主任医生', txtInquiry: '￥90.0', videoInquiry: '￥90.0', sort: 49, state: 1 },
      { id: 52, name: '杜牧', hospital: '乐清人民医院', department: '内科', juese: '药师', rank: '医生', txtInquiry: '￥50.0', videoInquiry: '￥50.0', sort: 48, state: 1 },
      { id: 53, name: '陈庆之', hospital: '北京仁和医院', department: '内科', juese: '药师', rank: '主任医生', txtInquiry: '￥79.0', videoInquiry: '￥79.0', sort: 47, state: 1 },
      { id: 54, name: '曹操', hospital: '北京仁和医院', department: '外科', juese: '医生', rank: '药师', txtInquiry: '￥99.0', videoInquiry: '￥99.0', sort: 46, state: 1 },
      { id: 55, name: '张飞', hospital: '温州儿童医院', department: '儿科', juese: '药师', rank: '主任医生', txtInquiry: '￥159.0', videoInquiry: '￥159.0', sort: 45, state: 1 },
      { id: 56, name: '张飞', hospital: '温州三甲医院', department: '其他科室', juese: '医生', rank: '医生', txtInquiry: '￥189.0', videoInquiry: '￥189.0', sort: 44, state: 1 },
      { id: 57, name: '张飞', hospital: '北京仁和医院', department: '其他科室', juese: '医生', rank: '副主任医生', txtInquiry: '￥147.0', videoInquiry: '￥147.0', sort: 43, state: 1 },
      { id: 58, name: '张飞', hospital: '北京仁和医院', department: '内科', juese: '药师', rank: '副主任医生', txtInquiry: '￥59.0', videoInquiry: '￥59.0', sort: 42, state: 1 },
      { id: 59, name: '张飞', hospital: '乐清人民医院', department: '外科', juese: '药师', rank: '医生', txtInquiry: '￥70.0', videoInquiry: '￥70.0', sort: 41, state: 1 },
      { id: 60, name: '张飞', hospital: '乐清人民医院', department: '内科', juese: '药师', rank: '药师', txtInquiry: '￥65.0', videoInquiry: '￥65.0', sort: 40, state: 1 },
      { id: 61, name: '李牧', hospital: '温州三甲医院', department: '外科', juese: '医生', rank: '主任医生', txtInquiry: '￥160.0', videoInquiry: '￥160.0', sort: 39, state: 1 },
      { id: 62, name: '苏某', hospital: '温州儿童医院', department: '其他科室', juese: '医生', rank: '主任医生', txtInquiry: '-', videoInquiry: '-', sort: 38, state: 1 },
      { id: 63, name: '李白', hospital: '温州三甲医院', department: '儿科', juese: '药师', rank: '医生', txtInquiry: '￥80.0', videoInquiry: '￥80.0', sort: 37, state: 1 },
      { id: 64, name: '杜甫', hospital: '温州儿童医院', department: '其他科室', juese: '药师', rank: '副主任医生', txtInquiry: '￥90.0', videoInquiry: '￥90.0', sort: 36, state: 1 },
      { id: 65, name: '杜牧', hospital: '乐清人民医院', department: '其他科室', juese: '药师', rank: '医生', txtInquiry: '￥50.0', videoInquiry: '￥50.0', sort: 35, state: 1 },
      { id: 66, name: '陈庆之', hospital: '北京仁和医院', department: '儿科', juese: '医生', rank: '主任医生', txtInquiry: '￥79.0', videoInquiry: '￥79.0', sort: 34, state: 1 },
      { id: 67, name: '曹操', hospital: '北京仁和医院', department: '内科', juese: '医生', rank: '药师', txtInquiry: '￥99.0', videoInquiry: '￥99.0', sort: 33, state: 1 },
    ]

    let searchArr = []
    let dangqianyeData = []
    let maxPage
    let dangqianyePage = 1
    let delId
    let xiugaiId
    search()

    // 筛选
    $('#searchBtn').click(function () {
      search()
    })
    function search() {
      let searchName = $('#searchName').val()
      let searchHospital = $('#searchHospital option:selected').text()
      let searchRank = $('#searchRank option:selected').text()
      // console.log(searchName, searchHospital, searchRank)
      searchArr = [...arr]
      if (searchName != '') {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchName != searchArr[i].name) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      if (searchHospital != '选择医院') {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].hospital != searchHospital) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      if (searchRank != '角色选择') {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].rank != searchRank) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      // console.log(searchArr)
      showPage(searchArr)
      showData(searchArr, 1)
    }

    // 重置
    $('#reset').click(function () {
      $('#searchName').val("")
      $('#searchHospital option:first-child').prop('selected', 'selected')
      $('#searchRank option:first-child').prop('selected', 'selected')
      search()
    })

    // 根据数据渲染table的dom节点
    function show(data) {
      $('#tableDiv').html('')
      for (let i = 0; i < data.length; i++) {
        $('#tableDiv').append(`
          <tr>
            <td>
              <input type="checkbox" id="inlineCheckbox1" value="option1" />
              ${data[i].id}
            </td>
            <td align="center">${data[i].name}</td>
            <td align="center">${data[i].hospital}</td>
            <td align="center"><img src="../../src/img/黑框照片.png" /></td>
            <td align="center">${data[i].rank}</td>
            <td align="center">${data[i].txtInquiry}</td>
            <td align="center">${data[i].videoInquiry}</td>
            <td align="center">${data[i].sort}</td>
            <td align="center">
              ${data[i].state == 1
              ? `<input dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox" checked>`
              : `<input dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox">`}
            </td>
            <td align="center">
              <span data-toggle="modal" data-target="#amendDiv" 
                data-whatever="@mdo" id = 'amendBtn' onclick = 'xiugaiDefault(${JSON.stringify(data[i])})'>
                  编辑
              </span>
              <span data-toggle="modal" data-target="#delDiv" 
                data-whatever="@mdo" id = 'delBtn' onclick = 'getDelId(${data[i].id})'>
                  删除
              </span>
            </td>  
          </tr>
        `)
      }
    }

    // 切割数据
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 10
      dangqianyeData = data.slice(qishi, qishi + 10)
      show(dangqianyeData)
      $('.page').eq(pageNum - 1).addClass('active').siblings().removeClass('active')
      dangqianyePage = pageNum
    }

    // 渲染页码
    function showPage(data) {
      maxPage = Math.ceil(data.length / 10)
      $('#pageDiv').html('')
      for (let i = 1; i <= maxPage; i++) {
        $('#pageDiv').append(`<button class="page">${i}</button>`)
      }
      // 共多少条数据
      $('#totPage').html('')
      $('#totPage').append(`<span>${searchArr.length}条</span>`)
    }

    $('#pageDiv').on('click', '.page', function () {
      showData(searchArr, parseInt($(this).text()))
    })

    // 根据输入的页码重新渲染数据
    $('#goPage').click(function () {
      refreshto()
    })

    function refreshto() {
      let goPageNum = $('#goPageNum').val()
      if (goPageNum != 0 && goPageNum <= maxPage) {
        showData(searchArr, goPageNum)
      }
    }

    // 上一页  下一页
    $('#prePage').click(function () {
      if (dangqianyePage > 1) {
        let shangyiye = dangqianyePage - 1
        showData(searchArr, shangyiye)
      }
    })

    $('#nextPage').click(function () {
      if (dangqianyePage < maxPage) {
        let xiayiye = dangqianyePage + 1
        showData(searchArr, xiayiye)
      }
    })

    // 删除
    function getDelId(id) {
      delId = id;
      // console.log(delId)
    }

    $("#del").click(function () {
      for (let i = 0; i < searchArr.length; i++) {
        if (searchArr[i].id == delId) {
          arr.splice(i, 1);
        }
      }
      searchArr = [...arr]
      $("#delDiv").modal("hide");
      showPage(searchArr);
      showData(searchArr, dangqianyePage);
    });

    // 新增
    $("#save").click(function () {
      let addObj = {
        id: searchArr.length + 1,
        hospital: $("#add").find("#appendHospital option:selected").val(),
        department: $("#add").find("#appendDepartment option:selected").val(),
        juese: $("#add").find("#appendJuese option:selected").val(),
        name: $("#add").find(".modal-body #appendName").val(),
        rank: $("#add").find("#appendRank option:selected").val(),
        txtInquiry: '￥' + $("#add").find(".modal-body #appendTxt").val(),
        videoInquiry: '￥' + $("#add").find(".modal-body #appendVideo").val(),
        sort: searchArr[searchArr.length - 1].sort - 1,
        state: 1,
      };
      // console.log(addObj)
      // // 重新渲染
      arr.push(addObj);
      searchArr = [...arr];
      showPage(searchArr);
      showData(searchArr, maxPage);

      // 隐藏添加模态框
      $("#add").modal("hide");
    });

    // 编辑
    function xiugaiDefault(stuObj) {
      // console.log(stuObj)
      $('#amendDiv')
        .find('.modal-body #amendHospital')
        .val('' + stuObj.hospital + '');
      $('#amendDiv')
        .find('.modal-body #amendDepartment')
        .val('' + stuObj.department + '');
      $('#amendDiv')
        .find('.modal-body #amendJuese')
        .val('' + stuObj.juese + '');
      $('#amendDiv')
        .find('.modal-body #amendName')
        .val('' + stuObj.name + '');
      $('#amendDiv')
        .find(".modal-body #amendRank")
        .val('' + stuObj.rank + '');
      $('#amendDiv')
        .find('.modal-body #amendTxt')
        .val('' + stuObj.txtInquiry + '');
      $('#amendDiv')
        .find('.modal-body #amendVideo')
        .val('' + stuObj.videoInquiry + '');
      xiugaiId = stuObj.id
      // console.log(xiugaiId)
    }

    $('#xiugai').click(function () {
      let hospital = $('#amendHospital option:selected').text()
      let department = $('#amendDepartment option:selected').text()
      let juese = $('#amendJuese option:selected').text()
      let name = $('#amendName').val()
      let drugtype = $('#amendRank option:selected').text()
      let txtInquiry = $('#amendTxt').val()
      let videoInquiry = $('#amendVideo').val()
      for (let i = 0; i < searchArr.length; i++) {
        if (xiugaiId == searchArr[i].id) {
          searchArr[i].hospital = hospital
          searchArr[i].department = department
          searchArr[i].juese = juese
          searchArr[i].name = name
          searchArr[i].drugtype = drugtype
          searchArr[i].txtInquiry = txtInquiry
          searchArr[i].videoInquiry = videoInquiry
        }
      }
      // 隐藏修改模态框
      $("#amendDiv").modal("hide");
      showPage(searchArr);
      showData(searchArr, 1);
    });
  </script>
</body>

</html>